<template>
  <div id="MealContainer">
    <div ref="LeftContain" class="LeftContainer">
      <div class="food-content">
        <ul ref="goodsList" class="NavList">
          <li @click="ChangeNavIndex(index)" :class="{active: navIndex === index}" 
              v-for="(good, index) in goods" :key="index">{{good.name}}</li>
        </ul>
      </div>
    </div>
    <div ref="RightContain" class="RightContainer">
      <div class="foods-wrapper">
        <ul ref="foodsList">
          <li class="food-list-hook" v-for="(good, index) in goods" :key="index">
            <h1 class="title">{{good.name}}</h1>
            <ul>
              <li class="food-item bottom-border-1px" v-for="(food, index) in good.foods" :key="index">
                <div class="icon">
                  <img width="57" height="57"
                      :src="food.image">
                </div>
                <div class="content">
                  <h2 class="name">{{food.name}}</h2>
                  <p class="desc">{{food.description}}</p>
                  <div class="extra">
                    <span class="count">月售{{food.sellCount}}份</span>
                    <span>好评率{{food.rating}}%</span></div>
                  <div class="price">
                    <span class="now">￥{{food.price}}</span>
                  </div>
                  <div class="cartcontrol-wrapper">
                    <CartControl :food="food"/>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <ShopCart/>
  </div>
</template>

<script>
import CartControl from '../../../components/CartControl/CartControl'
import ShopCart from '../../../components/ShopCart/ShopCart'
import BScroll from '@better-scroll/core'
import {mapState} from 'vuex'
export default {
  data() {
    return {
      tops: [],
      scrollY: 0,
    }
  },
  components: {
    CartControl,
    ShopCart
  },
  async mounted() {
    if(this.goods) {
      this._initScroll(),
      this._initLis()
    }
  },
  methods: {
    _initScroll() {
      if(this.leftScroll || this.rightScroll) {
        this.leftScroll.refresh()
        this.rightScroll.refresh()
      } else {
        this.leftScroll = new BScroll(this.$refs.LeftContain, {
        scrollY: true,
        click: true // 默认为false,需要手动修改
      }),
      this.rightScroll = new BScroll(this.$refs.RightContain, {
        scrollY: true,
        probeType: 2,
        // probeType: 3 能使scroll停止滚动时让左侧能定位正确
        click: true // 默认为false,需要手动修改
      }),
  
      this.rightScroll.on('scroll', position => {
        this.scrollY = Math.abs(position.y)
      })
      // 能使scroll停止滚动时让左侧能定位正确
      this.rightScroll.on('scrollEnd', position => {
        this.scrollY = Math.abs(position.y)
      })
      }
    },
    _initLis() {
      let top = 0
      let tops = []
      tops.push(top)
      let lis = Array.from(this.$refs.foodsList.children)
      lis.reduce((pre, liItem) => {
        pre += liItem.clientHeight
        tops.push(pre)
        return pre
      }, top)
      this.tops = tops
    },
    ChangeNavIndex(index) {
      // 直接改变navIndex不行,已知道navIndex为计算属性,改变其依赖值navIndex也会改变
      this.scrollY = this.tops[index]

      this.rightScroll.scrollTo(0, -this.scrollY, 800)
    }
  },
  computed: {
    ...mapState({
      goods: state => state.shop.shopdatas.goods
    }),
    navIndex() {
      let {tops, scrollY} = this
      let index = tops.findIndex((top, index) => scrollY >= tops[index] && scrollY < tops[index + 1])
      if(this.leftScroll && index !== this.index) {
        this.index = index

        this.leftScroll.scrollToElement(this.$refs.goodsList.children[index], 800)
      }
      return index
    }
  },
  watch: {
    goods() {
      this.$nextTick(() => {
        this._initScroll()
        this._initLis()
      })
    }
  }
}
</script>

<style lang="stylus">
@import '../../../common/stylus/mixins.styl'
#MealContainer
  display flex
  overflow hidden
  height calc(100vh - 272px)
  .LeftContainer
    width 80px
    background #f3f5f7
    .NavList
      li
        position relative
        width 100%
        height 50px
        text-align center
        line-height 50px
        &:after
          content ''
          position absolute
          width 80%
          height 1px
          left 10%
          bottom 0
          background rgba(7,17,27,0.1)
        &.active
          background #fff
          color $green
  .RightContainer
    flex 1
    .foods-wrapper
      flex: 1
      .title
        padding-left: 14px
        height: 26px
        line-height: 26px
        border-left: 2px solid #d9dde1
        font-size: 12px
        color: rgb(147, 153, 159)
        background: #f3f5f7
      .food-item
        display: flex
        margin: 18px
        padding-bottom: 18px
        bottom-border-1px(rgba(7, 17, 27, 0.1))
        &:last-child
          border-none()
          margin-bottom: 0
        .icon
          flex: 0 0 57px
          margin-right: 10px
        .content
          flex: 1
          .name
            margin: 2px 0 8px 0
            height: 14px
            line-height: 14px
            font-size: 14px
            color: rgb(7, 17, 27)
          .desc, .extra
            line-height: 10px
            font-size: 10px
            color: rgb(147, 153, 159)
          .desc
            line-height: 12px
            margin-bottom: 8px
          .extra
            .count
              margin-right: 12px
          .price
            font-weight: 700
            line-height: 24px
            .now
              margin-right: 8px
              font-size: 14px
              color: rgb(240, 20, 20)
            .old
              text-decoration: line-through
              font-size: 10px
              color: rgb(147, 153, 159)
          .cartcontrol-wrapper
            position: absolute
            right: 0
            bottom: 12px
</style>